<template>
	<div class="article_content">
		<div class="tanchuGB" @click="clickBack">
			<img class="tanchuclose" src="/images/close.png" />
		</div>
		<div class="swiper-container" id="swiper-container" style="height: 80%;width: 100%;">
			<div class="swiper-wrapper">
				<div class="swiper-slide" style="width:100%;height:100%;position:relative;margin-top: 0.3rem;"
					v-for="sItem in swiperList" :key="sItem">
					<div class="swiper-zoom-container"> <img :src="`${sItem}`" /></div>
				</div>
			</div>
		</div>
		<ul class="bottom">
			<li @click="tPrev()" style="width:15%"><img src="/images/syf.png" /></li>
			<li style="width:50%;margin: 0 auto;">
				<h1 class="biaoti">{{ dataInfo.coverTitle }}</h1>
			</li>
			<li @click="tNext()" style="float:right;width:15%"><img src="/images/xyf.png" /></li>
		</ul>

		<!-- 播放器 -->
		<audio-play ref="refAudioPlay"></audio-play>
	</div>
</template>
<style scoped src="../../public/css/styles2.css"></style>
<style scoped>
.article_content {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

.bottom {
	height: 20%;
	width: 100%;
	clear: both;
}

.bottom li {
	float: left;
	height: 100%;
	position: relative;
	margin: 0 4.4%;
	width: 7.8%;
}

.bottom li a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.bottom li img {
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	max-height: 100%;
	max-width: 100%;
}

.biaoti {
	text-align: center;
	font-size: 20px;
	color: #FFF;
	font-weight: 100;
	height: 26px;
	line-height: 26px;
	transform: translateY(-50%);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
</style>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import AudioPlay from '@/components/AudioPlay.vue';
import { baseUrlImg } from '@/api/index.js'
import { throttle } from '@/utils';

export default {
	name: "articlePage",
	components: {
		AudioPlay,
	},
	data() {
		return {
			swiper: null,
			swiperList: [],
			dataInfo: {}
		}
	},
	mounted() {
		if (this.$route.params) {
			this.dataInfo = this.$route.params
			if (this.dataInfo.music) {
				this.$refs.refAudioPlay.playAudio(baseUrlImg + this.dataInfo.music);
			}
			const tempList = []
			if (this.dataInfo.pictureContent) {
				this.dataInfo.pictureContent.map((p) => {
					p = baseUrlImg + p
					tempList.push(p)
				})
				this.swiperList = tempList
			}
			this.$nextTick(()=>{
				this.getSwiper();
			});
			this.$nextTick(()=>{
				// 在文档加载完成后执行
				document.addEventListener('DOMContentLoaded', function () {
					// 阻止双指缩放事件
					document.addEventListener('gesturestart', function (e) {
							e.preventDefault();
					});
					// 阻止双击缩放事件
					document.addEventListener('dblclick', function (e) {
							e.preventDefault();
					});
				});
				document.documentElement.addEventListener('touchstart', function (event) {
          if (event.touches.length > 1) {
            event.preventDefault();
          }
				}, false);
        var lastTouchEnd = 0;
				document.documentElement.addEventListener('touchend', function (event) {
					var now = Date.now();
					if (now - lastTouchEnd <= 300) {
						event.preventDefault();
					}
					lastTouchEnd = now;
				}, false);
				document.addEventListener('gesturestart', function(event) {
					event.preventDefault();
        });
			});
		}
	},
	methods: {
		getSwiper() {
			if(this.swiper != null){ return }
			this.swiper = new Swiper(".swiper-container", {
				loop: true,
				zoom: false,
				initialSlide: 0,
				effect: 'flip',
				observer: true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents: true,//修改swiper的父元素时，自动初始化swiper
			});
		},
		tNext: throttle(function (...args) {
			this.next(...args);
		}, 1000),
		tPrev: throttle(function (...args) {
			this.prev(...args);
		}, 1000),
		next() {
			this.swiper.slideNext();
		},
		prev() {
			this.swiper.slidePrev();
		},
		clickBack(){
			this.$router.go(-1)
		},
	}
}
</script>